import Vue from "vue";
import VueRouter from "vue-router";
import MainLayout from "../layout";
import store from "@/store";
Vue.use(VueRouter);

//独立提取业务页面的路由配置，方便菜单使用
export const children = [
  {
    path: "/dashboard",
    component: () => import("@/views/dashboard"),
    meta: {
      title: "数据可视化",
      icon: "el-icon-s-data",
    },
  },
  {
    path: "/category",
    component: () => import("@/views/category/index.vue"),
    meta: {
      title: "分类管理",
      icon: "el-icon-menu",
    },
    beforeEnter: (to, from, next) => {
      console.log("访问了分类的，路由独享守卫");
      next();
    },
    children: [
      {
        path: "/category/list",
        component: () => import("@/views/category/list.vue"),
        meta: {
          title: "分类列表",
        },
      },
      {
        path: "/category/pub",
        component: () => import("@/views/category/pub.vue"),
        meta: {
          title: "分类发布",
        },
      },
    ],
  },
  {
    path: "/company",
    component: () => import("@/views/company"),
    meta: {
      title: "企业管理",
      icon: "el-icon-s-shop",
    },
  },
  {
    path: "/job",
    component: () => import("@/views/job/index.vue"),
    meta: {
      title: "岗位管理",
      icon: "el-icon-menu",
    },
    children: [
      {
        path: "/job/list",
        component: () => import("@/views/job/list.vue"),
        meta: {
          title: "岗位列表",
        },
      },
    ],
  },
  {
    path: "/manager",
    component: () => import("@/views/manager/index.vue"),
    meta: {
      title: "权限管理",
      icon: "el-icon-menu",
    },
    children: [
      {
        path: "/manager/role",
        component: () => import("@/views/manager/role.vue"),
        meta: {
          title: "角色管理",
        },
      },
      {
        path: "/manager/account",
        component: () => import("@/views/manager/account.vue"),
        meta: {
          title: "账号管理",
        },
      },
    ],
  },
  {
    path: "/excel",
    component: () => import("@/views/excel/index.vue"),
    meta: {
      title: "Excel表格",
      icon: "el-icon-menu",
    },
    children: [
      {
        path: "/excel/output",
        component: () => import("@/views/excel/output.vue"),
        meta: {
          title: "Excel导出",
        },
      },
      {
        path: "/excel/inport",
        component: () => import("@/views/excel/inport.vue"),
        meta: {
          title: "Excel导入",
        },
      },
    ],
  },
];

const router = new VueRouter({
  routes: [
    {
      path: "/",
      component: MainLayout,
      children,
    },
    {
      path: "/login",
      component: () => import("@/views/login.vue"),
    },
    {
      path: "/vuex/test",
      component: () => import("@/views/vuex-test/index.vue"),
    },
    {
      path: "/permission",
      component: () => import("@/views/permission.vue"),
    },
  ],
});
// let userInfo = { name: "三丰" }; //模拟用户登录状态
// 全局前置守卫
router.beforeEach((to, from, next) => {
  console.log("全局守卫");
  // next();
  let { userInfo } = store.state.user; //路由变化，实时提取最新状态机数据
  // 白名单
  let whiteList = ["/login", "/permission"];
  if (whiteList.includes(to.path)) {
    next(); //白名单路由，直接放行
  } else {
    if (userInfo) {
      let { permission } = userInfo.roleData;
      permission.push("/");
      if (permission.includes(to.path)) {
        next(); //登录的、切有权限的用户直接放行
      } else {
        next("/permission");
      }
    } else {
      next("/login"); //未登录用户，引导登录
    }
  }
});

export default router;
